<template>
    <div>
            <strong>企业名称：<span v-if="edit" @click="editBrand">{{brand}}</span>
                <el-input v-else v-model="brand" size="mall" style="width: 20em" @keydown.native.enter="finish"></el-input></strong>
            <el-upload
                    class="avatar-uploader"
                    action="http://localhost:3000/changeLogo"
                    :show-file-list="false"
                    name="logo"
                    :on-success="handleSuccess"
                    :with-credentials='true'
            >
                <img :src="logoUrl" class="avatar">
            </el-upload>
        <i>更改logo请点击头像</i>
    </div>
</template>

<script>
    import {sendwithget, sendwithpost} from "../../../../network/profile";

    export default {
        name: "SystemSetUp",
        data() {
            return {
                brand: this.$store.state.systemMessage.brand,
                logoUrl: this.$store.state.systemMessage.logoUrl,
                edit: true
            }
        },
        created() {

        },
        methods: {
            handleSuccess(res,file) {
                this.$message({
                    showClose: true,
                    message: res.message,
                    type: res.type
                })
                if (res.res_code == 2) {
                    this.logoUrl = URL.createObjectURL(file.raw);
                }
            },
            editBrand() {
                this.edit = !this.edit
            },
            finish() {
                sendwithpost({
                    url: '/changeBrand',
                    data: {
                        brand: this.brand
                    }
                }).then(res=> {
                    this.$message({
                        showClose: true,
                        message: res.data.message,
                        type: res.data.type
                    })
                    if (res.data.res_code == 2) {
                        this.editBrand()
                    }
                })
            }
        }

    }
</script>

<style scoped>
    .avatar-uploader {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        width: 178px;
        background-color: #ffffff;
        margin-top: 20px;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .brand {
        display: flex;
        align-items: center;
    }
</style>